<template>
  <div class="h100 login">
    <div class="mark">
      <div class="container">
        <!-- rules 验证规则 -->
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!-- 用户 -->
          <!-- prop   -->
          <el-form-item label="账号" prop="userName">
            <el-input
              type="text"
              v-model="ruleForm.userName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item label="密码" prop="passWord">
            <el-input
              type="password"
              v-model="ruleForm.passWord"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              style="width: 100%"
              type="primary"
              @click="submitForm('ruleForm')"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value.length < 5) {
        callback(new Error("长度必须大于5"));
      }
      //  匹配正确走下一步
      callback();
    };
    var validatePass2 = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("长度必须大于6"));
      }
      //  匹配正确走下一步
      callback();
    };
    return {
      ruleForm: {
        userName: "",
        passWord: "",
      },
      rules: {
        //   trigger: "blur"  失焦时验证
        userName: [{ validator: validatePass, trigger: "blur" }],
        passWord: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios
            .post("/api/users/login", {
              ...this.ruleForm
            })
            .then((res) => {
              if (res.data.code === 1) {
                sessionStorage.setItem('token', res.data.token)
                this.$router.push('/home')
              } else {
                this.$message.error(res.data.message);
              }
            });
          //   登录传参
          // axios.post('/api/users/login', {
          //     userName: this.ruleForm.userName,
          //     passWord: this.ruleForm.passWord
          // }).then(res => {
          //     console.log(res)
          // })
        } else {
          // this.$message.error('格式错误');
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.login {
  background: url("https://img.alicdn.com/tfs/TB1zsNhXTtYBeNjy1XdXXXXyVXa-2252-1500.png")
    no-repeat;
  background-size: 100% 100%;
  min-width: 1000px;
}
.mark {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.container {
  position: absolute;
  top: 200px;
  right: 200px;
  width: 400px;
  padding: 40px;
  background: #fff;
  border-radius: 6px;
}
</style>